<template>
  <div>
    <TopFilter :list="topFilterList" :cols="3" @filterChange="changeHandle" :labelWidth="120"></TopFilter>
    <BreakSpace label="物料基础信息" :containerStyle="{ marginBottom: '10px' }" />
    <FilterTable
      ref="table"
      selectionType="single"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :onRowSelectChange="selectChangeHandle"
      :onColumnsChange="columns => (this.columns = columns)"
    >
    </FilterTable>
    <div style="height:47px;"></div>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'center'
      }"
    >
      <el-button @click="closeDialog(1)">关 闭</el-button>
      <el-button @click="closeDialog(2)" :disabled="isDisabled" type="primary">确 定</el-button>
    </div>
  </div>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';

import { queryVinForOrder } from '@/api/dealerSale/SalesSanagement/RetailOrderMaintenanceAF';
import { vehicleConfiguration } from '@/api/omFinance';

export default {
  mixins: [dictionary],
  props: ['rowData'],
  data() {
    this.saveData = null;
    return {
      topFilterList: this.createdFrom(),
      columns: this.createdTable(),
      fetchApi: queryVinForOrder,
      fetchParams: { productCode: this.rowData.productCode },
      seriesId: null,
      packageId: null,
      isDisabled: true
    };
  },
  created() {
    // this.querySeriess();
    // this.getTrimColor();
    // this.getOutColor();
    // this.getList();
  },
  // watch: {
  //   seriesId: function(newName, oldName) {
  //     if (newName && this.packageId) {
  //       this.queryOptions(newName, this.packageId);
  //     }
  //   },
  //   packageId: function(newName, oldName) {
  //     if (newName && this.seriesId) {
  //       this.queryOptions(this.seriesId, newName);
  //     }
  //   }
  // },
  methods: {
    async getList() {
      let res = await vehicleConfiguration(0, { isUnlimited: 10041001 });
      this.topFilterList.find(item => item.fieldName === 'vehicleInfo').itemList = res.data;
    },
    // // 车系
    // async querySeriess() {
    //   const res = await querySeriessList();
    //   if (res.resultCode == 200) {
    //     res.data.map(x => {
    //       this.topFilterList.find(item => item.fieldName == 'seriesId').itemList.push({ text: x.seriesName, value: x.seriesId });
    //     });
    //   }
    // },
    // // 车型
    // async queryModels(seriesId) {
    //   const res = await queryModelsList(seriesId);
    //   if (res.resultCode == 200) {
    //     this.topFilterList.find(x => x.fieldName == 'modelId').itemList = [];
    //     res.data.map(x => {
    //       this.topFilterList.find(item => item.fieldName == 'modelId').itemList.push({ text: x.modelName, value: x.modelId });
    //     });
    //   }
    // },
    // // 配置
    // async queryPackages(seriesId) {
    //   const res = await queryPackagesList(seriesId);
    //   if (res.resultCode == 200) {
    //     this.topFilterList.find(x => x.fieldName == 'packageId').itemList = [];
    //     res.data.map(x => {
    //       this.topFilterList.find(item => item.fieldName == 'packageId').itemList.push({ text: x.configName, value: x.packageId });
    //     });
    //   }
    // },
    // // 选装
    // async queryOptions(seriesId, packageId) {
    //   let params = {
    //     seriesId: seriesId,
    //     packageId: packageId
    //   };
    //   const res = await queryOptionsList(params);
    //   if (res.resultCode == 200) {
    //     this.topFilterList.find(item => item.fieldName == 'optionId').itemList = [];
    //     res.data.map(x => {
    //       this.topFilterList.find(item => item.fieldName == 'optionId').itemList.push({ text: x.optionName, value: x.optionId });
    //     });
    //   }
    // },
    // // 内饰
    // async getTrimColor() {
    //   const res = await trimColor();
    //   if (res.resultCode == 200) {
    //     res.data.map(x => {
    //       this.topFilterList.find(item => item.fieldName == 'trimColorId').itemList.push({ text: x.colorName, value: x.colorId });
    //     });
    //   }
    // },
    // // 外饰
    // async getOutColor() {
    //   const res = await outColor();
    //   if (res.resultCode == 200) {
    //     res.data.map(x => {
    //       this.topFilterList.find(item => item.fieldName == 'colorId').itemList.push({ text: x.colorName, value: x.colorId });
    //     });
    //   }
    // },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, this.fetchParams, val);
    },
    closeDialog(type) {
      if (type == 1) {
        this.$emit('close', false);
      } else {
        this.$emit('close', false, this.saveData);
      }
    },
    selectChangeHandle(row) {
      if (row.length > 0) {
        this.isDisabled = false;
        this.saveData = row;
        return;
      }
      this.isDisabled = true;
    },
    createdFrom() {
      return [
        {
          type: 'TEXT_AREA',
          label: 'VIN',
          fieldName: 'vin',
          placeholder: '请输入',
          maxlength: '',
          maxRows: 2
        }
        // {
        //   type: 'INPUT',
        //   label: '产品代码',
        //   fieldName: 'productCode',
        //   placeholder: '请输入'
        // },
        // {
        //   type: 'INPUT',
        //   label: '产品名称',
        //   fieldName: 'productName',
        //   placeholder: '请输入'
        // },
        // {
        //   type: 'INPUT_CASCADER',
        //   label: '车型选择',
        //   fieldName: 'vehicleInfo',
        //   placeholder: '请选择',
        //   options: { titles: ['品牌', '车系', '车型', '配置', '选装', '颜色'] },
        //   itemList: []
        // }
        // {
        //   type: 'SELECT',
        //   label: '车系名称',
        //   fieldName: 'seriesId',
        //   placeholder: '请选择',
        //   itemList: [],
        //   change: val => {
        //     if (val) {
        //       this.seriesId = val;
        //       this.queryModels(val);
        //       this.queryPackages(val);
        //       return;
        //     }
        //     this.topFilterList.map(x => {
        //       if (x.fieldName == 'modelId') {
        //         x.initialValue = '';
        //         x.itemList = [];
        //       }
        //       if (x.fieldName == 'packageId') {
        //         x.initialValue = '';
        //         x.itemList = [];
        //       }
        //       if (x.fieldName == 'optionId') {
        //         x.initialValue = '';
        //         x.itemList = [];
        //       }
        //     });
        //   }
        // },
        // {
        //   type: 'SELECT',
        //   label: '车型名称',
        //   fieldName: 'modelId',
        //   placeholder: '请选择',
        //   itemList: []
        // },
        // {
        //   type: 'SELECT',
        //   label: '配置名称',
        //   fieldName: 'packageId',
        //   placeholder: '请选择',
        //   itemList: [],
        //   change: val => {
        //     if (val) {
        //       this.packageId = val;
        //       return;
        //     }
        //     this.topFilterList.map(x => {
        //       if (x.fieldName == 'optionId') {
        //         x.initialValue = '';
        //         x.itemList = [];
        //       }
        //     });
        //   }
        // },
        // {
        //   type: 'SELECT',
        //   label: '选装名称',
        //   fieldName: 'optionId',
        //   placeholder: '请选择',
        //   itemList: []
        // },
        // {
        //   type: 'SELECT',
        //   label: '内饰',
        //   fieldName: 'trimColorId',
        //   placeholder: '请选择',
        //   itemList: []
        // },
        // {
        //   type: 'SELECT',
        //   label: '外饰',
        //   fieldName: 'colorId',
        //   placeholder: '请选择',
        //   itemList: []
        // }

        // {
        //   type: 'SELECT',
        //   label: '是否锁定',
        //   fieldName: 'isLock',
        //   placeholder: '请选择',
        //   itemList: []
        // },
        // {
        //   type: 'SELECT',
        //   label: '实销配车',
        //   fieldName: 'distributeCar',
        //   placeholder: '请选择',
        //   itemList: []
        // },
        // {
        //   type: 'SELECT',
        //   label: '车辆状态',
        //   fieldName: 'carStatus',
        //   placeholder: '请选择',
        //   itemList: []
        // }
      ];
    },
    createdTable() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '产品代码',
          dataIndex: 'productCode',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '产品名称',
          dataIndex: 'productName',
          align: 'center',
          width: 400,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: 'VIN',
          dataIndex: 'vin',
          align: 'center',
          width: 180,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        // {
        //   title: '是否锁定',
        //   dataIndex: 'isLock',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'checkbox',
        //   filterItems: this.createDictList('1523'),
        //   render: props => {
        //     return <span>{this.createDictText(props.row.isLock, '1523')}</span>;
        //   }
        // },
        // {
        //   title: '实销配车',
        //   dataIndex: 'distributeCar',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input'
        // },
        // {
        //   title: '车辆状态',
        //   dataIndex: 'carStatus',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'checkbox',
        //   filterItems: this.createDictList('6040'),
        //   render: props => {
        //     return <span>{this.createDictText(props.row.isLock, '6040')}</span>;
        //   }
        // },
        {
          title: '内饰',
          dataIndex: 'trimColorName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '外饰',
          dataIndex: 'colorName',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    }
  }
};
</script>
